<template>
    <div class="header_box">
        <div class="user_title">
            <!--<div class="search_input">-->
                <!--<input type="text" placeholder="请输入文章标题"/>-->
                <!--<i></i>-->
            <!--</div>-->
            <div class="user_head">
                <img :src="userInfo.avatar"/>
            </div>
            <Poptip placement="bottom-end" v-model="visible">
                <div class="user_select">
                    <p v-text="userInfo.name"></p>
                    <i></i>
                </div>
                <div class="user_menu" slot="content">
                    <div class="user_data">
                        <div class="user_data_left">
                            <img :src="userInfo.avatar"/>
                            <div>
                                <p v-text="userInfo.name"></p>
                                <span v-text="userInfo.mobile"></span>
                            </div>
                        </div>
                        <div class="user_data_right">
                            <i></i>
                            <p>未实名认证</p>
                        </div>
                    </div>
                    <div class="lianjie">
                        <div>所有分享的链接仅限公司成员访问请进行实名认证</div>
                        <i class="arrow_right"></i>
                    </div>
                    <div class="guanli">
                        <div>
                            <i></i>
                            <p>管理后台</p>
                        </div>
                        <i class="arrow_right"></i>
                    </div>
                    <div class="user_menu_list">
                        <ul>
                            <li>
                                <div>
                                    <i class="user_set_up"></i>
                                    <span>设置中心</span>
                                </div>
                                <i class="arrow_right"></i>
                            </li>
                            <li>
                                <div>
                                    <i class="user_order"></i>
                                    <span>查看订单</span>
                                </div>
                                <i class="arrow_right"></i>
                            </li>
                        </ul>
                    </div>
                    <div class="logout pointer" @click="signOut">
                        退出登录
                    </div>
                </div>
            </Poptip>
        </div>
    </div>
</template>

<script>
  import Cookie from 'js-cookie';

  export default {
    data(){
      return{
        visible:false
      }
    },
    computed: {
      userInfo() {
        return this.$store.state.user.userInfo
      }
    },
    mounted() {
    },
    methods:{
      signOut:function(){
        const domain = this.$config.domain
        Cookie.remove('access_token', { domain });
        Cookie.remove('refresh_token', { domain });
        Cookie.remove('base_info', { domain });
        this.visible = false
        window.location.href = this.$config.loginUrl + '?redirect_uri=' + encodeURIComponent(`${window.location.href}`)
      },
      openDrag:function () {
        this.showDrag = true
      }
    }
  };
</script>

<style scoped>
    .header_box {
        height: 74px;
        overflow: hidden;
        padding: 20px 22px 0 5px;
    }

    /* 左侧路径 */
    .header_box .route_box .route_text .route span {
        color: #333333;
    }

    .header_box .route_box .route_text .route_date {
        font-size: 12px;
        color: #999;
        margin-top: 8px;
    }

    .header_box .route_box .route_text .route_date p {
        float: left;
    }

    .header_box .route_box .route_text .route_date span {
        float: left;
        margin-left: 20px;
    }

    /* 右侧用户信息 search搜索框 */
    .header_box .user_title {
        float: right;
    }

    .header_box .user_title .search_input {
        width: 200px;
        height: 30px;
        border: 1px solid #eeeeee;
        border-radius: 14px;
        margin-top: 2px;
        float: left;
    }

    .header_box .user_title .search_input input {
        border: none;
        outline: none;
        margin-left: 10px;
        height: 28px;
        background: none;
        font-size: 12px;
        line-height: 28px;
    }

    .header_box .user_title .search_input i {
        float: right;
        width: 16px;
        height: 16px;
        background: url("../assets/icon/headerNav/search.png") no-repeat;
        background-size: 100%;
        margin-right: 7px;
        margin-top: 6px;
    }

    .header_box .user_title .user_head {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
        margin-left: 24px;
        float: left;
    }

    .header_box .user_title .user_head img {
        width: 100%;
        height: 100%;
    }

    .header_box .user_title .user_select {
        float: left;
        line-height: 32px;
        margin-left: 12px;
        font-size: 14px;
        color: #323232;
        font-family: PingFangSC;
        font-weight: 700;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .header_box .user_title .user_select p {
        float: left;
        margin-right: 8px;
    }

    .header_box .user_title .user_select i {
        width: 10px;
        height: 10px;
        background: url("../assets/icon/headerNav/select_down.png") no-repeat;
        background-size: 100%;
        float: right;
    }

    .header_box .user_title .user_menu {
        width: 300px;
        height: 356px;
    }

    .header_box .user_title .user_menu .user_data {
        height: 98px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eeeeee;
        justify-content: space-between;
        padding-left: 24px;
        padding-right: 19px;
    }

    .header_box .user_title .user_menu .user_data .user_data_left {
        display: flex;
        align-items: center;
    }

    .header_box .user_title .user_menu .user_data .user_data_left img {
        width: 32px;
        height: 32px;
        margin-right: 8px;
        float: left;
        border-radius: 50%;
    }

    .header_box .user_title .user_menu .user_data .user_data_left div {
        float: left;
    }

    .header_box .user_title .user_menu .user_data .user_data_left div p {
        font-size: 14px;
        color: rgba(51, 51, 51, 1);
    }

    .header_box .user_title .user_menu .user_data .user_data_left div span {
        font-size: 12px;
        color: #999999;
    }

    .header_box .user_title .user_menu .user_data .user_data_right {
        display: flex;
        align-items: center;
    }

    .header_box .user_title .user_menu .user_data .user_data_right i {
        width: 16px;
        height: 16px;
        background: url("../assets/icon/headerNav/renzheng.png") no-repeat;
        background-size: 100%;
        margin-right: 3px;
    }

    .header_box .user_title .user_menu .lianjie {
        height: 59px;
        border-bottom: 1px solid #eee;
        padding-left: 20px;
        padding-right: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header_box .user_title .user_menu .lianjie div {
        width: 180px;
        height: 32px;
        white-space: normal;
        color: #999999;
        font-size: 12px;
    }

    .header_box .user_title .user_menu .guanli {
        height: 59px;
        border-bottom: 1px solid #eee;
        padding-left: 20px;
        padding-right: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .header_box .user_title .user_menu .guanli div {
        display: flex;
        align-items: center;
    }

    .header_box .user_title .user_menu .guanli div i {
        width: 16px;
        height: 16px;
        background: url("../assets/icon/headerNav/user_guanli.png") no-repeat;
        background-size: 100%;
        margin-right: 9px;
    }

    .header_box .user_title .user_menu .guanli:hover div i {
        background: url("../assets/icon/headerNav/user_guanli_active.png") no-repeat;
        background-size: 100%;
    }

    .header_box .user_title .user_menu .guanli:hover div {
        color: #4690F5;
    }

    .header_box .user_title .user_menu .user_menu_list {
        height: 92px;
        border-bottom: 1px solid #eee;
    }

    .header_box .user_title .user_menu .user_menu_list ul li {
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 20px;
        padding-right: 10px;
        cursor: pointer;
    }

    .header_box .user_title .user_menu .user_menu_list ul li div {
        display: flex;
        align-items: center;
    }

    .header_box .user_title .user_menu .user_menu_list ul li div i {
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }

    .header_box .user_title .user_menu .user_menu_list ul li div .user_set_up {
        background: url("../assets/icon/headerNav/user_set_up.png") no-repeat;
        background-size: 100%;
    }

    .header_box .user_title .user_menu .user_menu_list ul li div .user_order {
        background: url("../assets/icon/headerNav/user_order.png") no-repeat;
        background-size: 100%;
    }

    .header_box .user_title .user_menu .user_menu_list ul li:hover div {
        color:
    }

    .header_box .user_title .user_menu .user_menu_list ul li:hover div .user_set_up {
        background: url("../assets/icon/headerNav/user_set_up_active.png") no-repeat;
        background-size: 100%;
    }

    .header_box .user_title .user_menu .user_menu_list ul li:hover div .user_order {
        background: url("../assets/icon/headerNav/user_order_active.png") no-repeat;
        background-size: 100%;
    }

    .header_box .user_title .user_menu .logout {
        height: 48px;
        text-align: center;
        line-height: 48px;
    }


    .arrow_right {
        width: 6px;
        height: 10px;
        background: url("../assets/icon/headerNav/arrow_right.png") no-repeat;
        background-size: 100%;
    }

    /* placeholder 样式 */
    ::-webkit-input-placeholder {
        color: #a7b6c1;
    }

    :-moz-placeholder {
        color: #a7b6c1;
    }

    ::-moz-placeholder {
        color: #a7b6c1;
    }

    :-ms-input-placeholder {
        color: #a7b6c1;
    }
</style>
